<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  	window.onload = function(){
		var but = document.getElementById('but');
		var top = document.getElementById('top');
		var zero = document.getElementById('zero');
		var input = document.getElementById('input');
		var table = document.getElementById('table');
		var record = document.getElementById('record');
		
		var timer = input.value;
		var def = ['00','00','00','000'];
		input.value = def.join(':');
		var h = 1;
		var g = 0;
		var l = 0;
		var p = 1;
		var j = 1;
		zero.onclick = function(){
			window.location.reload();
		}
		but.onclick = function(){
			this.disabled = true;
			record.disabled = false;
			timer2 = setInterval(function(){
				if(h<10){
					def.splice(2,1,'0'+h++);
				} else {
					def.splice(2,1,h++);
				}
				if(h==60){
					h-=60;
					def.splice(1,1,g++);
					if(g<10){
					def.splice(1,1,'0'+g);
				}
					if(g==60){
						g-=60;
						def.splice(0,1,l++);
					}
				}
				input.value = def.join(':');
				record.onclick = function(){
					this.disabled = false;
					if (p<10){
						var arr = def.join(':');
						var row = table.insertRow(-1);
						row.insertCell(-1).innerHTML = '　 记录'+ p++ +'.		' + arr;
				}
				}
			},1000);
			timer = setInterval(function(){
				if(j==999){
					j-=999;
				}
				if(j<10){
					def.splice(3,1,'00'+j++);
				}
				if(j<100){
					def.splice(3,1,'0'+j++);
				} else {
					def.splice(3,1,j++);
				}
				
				input.value = def.join(':');
			},1);
			}
		top.onclick = function(){
			but.disabled = false;
			record.disabled = true;
			clearInterval(timer);
			clearInterval(timer2);
		}
	}
  </script>
 </head>
  <style type="text/css">
  	.div{width:400px; height:545px; border:3px solid #000; margin:200px auto;}
	.t{font-size:30px;}
	#but{width:398px; height:40px; margin:1px; background:#00EE00;}
	#top{width:126px; height:40px; margin:1px; background:#FF3030;}
	#record{width:127px; height:40px; margin:1px; background:#FF6347;}
	#zero{width:125px; height:40px; margin:1px; background:#FF83FA;}
	#input{width:395px; height:50px; margin:1px; font-size:40px; text-align:center;}
	.rec{width:392px; height:350px; margin:1px auto; border:2px solid #1E90FF; font-size:30px; text-align:center;}
	.text{font-size:20px; text-align:center; color:blue;}
  </style>
 <body>
 	<div class="div">
 		<button id="but">开始</button>
		<button id="record">记录</button>
  		<button id="top">暂停</button>
		<button id="zero">清零</button>
		<input id="input" value="0" />
		<div class="text">记录区<br />↓ ↓ ↓</div>
		<div class="rec">
			<table id="table"></table>
		</div>
  	</div>
  
 </body>
</html>

